<template>
	<view>
		<view class="tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']" >
			<view class="regional-selection">
				<view class="mask" catchtap="cancel" style="">
				  <view class="content" style="height:800rpx">
				    <view class="top">
				      <view class="top-text top-left-color" hover-class="top-left-color-hover" @click="handleClickMask">取消</view>
				      <view class="top-text top-right-color" hover-class="top-right-color-hover" @click="confirm">确定</view>
				    </view>
				<!-- 	<view class="picker"> -->
						<picker-view style="width: 100%; height: 55%;" :value="value" @change="change" catchtap="no">
						  <picker-view-column>
						    <view v-for="(item,date_list) in date_list" :key="date_list" class="item">{{item}}</view>
						  </picker-view-column>
						  <picker-view-column>
						    <view  v-for="(item,time_list) in time_list" :key="time_list" class="item">{{item}}</view>
						  </picker-view-column>
						</picker-view>
					<!-- </view> -->
				    
				  </view>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="tui-actionsheet-mask"  :class="[show ? 'tui-mask-show' : '']"  @tap="handleClickMask"></view>
	</view>
</template>
 
<script>
export default {
  // name: "tuiActionsheet",
  props: {
		//点击遮罩 是否可关闭
		maskClosable: {
		  type: Boolean,
		  default: true,
		},
		//显示操作菜单
		show: {
		  type: Boolean,
		  default: false,
		},
		
		start_time: { //开始时间，设为整点
		  type: Number,
		  default: 8
		},
		
		end_time: { //结束时间，设为整点
		  type: Number,
		  default: 22
		},		  
    },
    data () {
		return {
			isShow: false,
			selectDate: "",
			dialogh: 0,  
			//日期列表和时间列表
			date_list: [],
			time_list: [],
			value:'',
			startTime:0,
			endTime:0,
			range:8,
			step:35,
			
		}       
    },
	
	  
	methods: {
	      handleClickMask(){
			  this.$emit('closePicker',false)
		  },
	      timeSelect () {
	        let start_day = (new Date().getTime()+1200000);
	        console.log('start_day',start_day); //2021-08-31
	        console.log(new Date());
	        let end_day = (new Date().setDate(new Date().getDate() + this.range))
	        console.log('end_day',start_day); //2021-08-31
	        //获取日期列表
	       
	  
	        // 获取当前时间
	        var currentDate = new Date();
	        // 获取当前小时数
	        var currentHour = currentDate.getHours();
	        if(currentHour < this.startTime){
	            currentHour =this.startTime
	        }
	  
	        if(currentHour>this.endTime){
	           start_day = (new Date().getTime()+ 1000*60*60*24);
	           currentHour =this.startTime
	        }
	  
	        let date_list = this.getDiffDate(start_day, end_day);
	  
	        let time_list = this.getTimeList(currentHour, this.endTime, this.step);
	        console.log('--time_list--',time_list);
	      
			this.date_list=date_list,
			this.time_list= time_list,
	   
	        //动画
	        this.animation = wx.createAnimation({
	            duration: 300
	        })
	        //500rpx转成px
	        let dialoghpx = 800 / 750 * wx.getSystemInfoSync().windowWidth	   
			this.dialogh=dialoghpx,
			this.selectDate= this.date_list[0] + this.time_list[0]
	       },
	  
	  
	        getDiffDate(start, end) {
	            let startTime = new Date(start);
	            let endTime = new Date(end);
	            let dateArr = [];
	            while ((endTime.getTime() - startTime.getTime()) >= 0) {
	                dateArr.push(this.ts_string(startTime.getTime()));
	                startTime.setDate(startTime.getDate() + 1);
	            }
	  
	            return dateArr;
	        },
	        zfill(num, length) {
	            return (Array(length).join("0") + num).slice(-length);
	        },
	        //把日期转换成xxxx-xx-xx的形式
	        ts_string(timestamp) {
	            let d = new Date(timestamp);
	            let day = "";
	            switch (d.getDay()) {
	                case 1:
	                    day = "周一";
	                    break;
	                case 2:
	                    day = "周二";
	                    break;
	                case 3:
	                    day = "周三";
	                    break;
	                case 4:
	                    day = "周四";
	                    break;
	                case 5:
	                    day = "周五";
	                    break;
	                case 6:
	                    day = "周六";
	                    break;
	                case 0:
	                    day = "周日";
	                    break;
	            }
	            let string = (d.getFullYear()) + "-" +
	                this.zfill((d.getMonth() + 1), 2) + "-" +
	                this.zfill((d.getDate()), 2) + " (" + day + ")"
	            return string
	        },
	        //获取时间区间列表，输入(起始时间，结束时间，步长)
	        getTimeList(start, end, step) {
	            let start_time = new Date();
	            //设置起始时间
	            start_time.setHours(start, 0, 0);
	            console.log('--start_time--',start_time);
	            //设置结束时间
	            let end_time = new Date();
	            end_time.setHours(end, 0, 0);
	            let startG = start_time.getTime(); //起始时间的格林时间
	            let endG = end_time.getTime(); //起始时间的格林时间
	            let step_ms = step * 60 * 1000;
	            let timeArr = [];
	            while (startG < endG) {
	                let time = this.timeAdd(startG, step_ms);
	                timeArr.push(time);
	                startG += step_ms;
	            }
	  
	            return timeArr;
	        },
	        timeAdd(time1, add) {
	            var nd = new Date(time1); //创建时间对象
	            //获取起始时间的时分秒
	            var hh1 = nd.getHours();
	            var mm1 = nd.getMinutes();
	            if (hh1 <= 9) hh1 = "0" + hh1;
	            if (mm1 <= 9) mm1 = "0" + mm1;
	            nd = nd.valueOf(); //转换为毫秒数
	            nd = nd + Number(add);
	            nd = new Date(nd);
	            var hh2 = nd.getHours();
	            var mm2 = nd.getMinutes();
	            if (hh2 <= 9) hh2 = "0" + hh2;
	            if (mm2 <= 9) mm2 = "0" + mm2;
	            var time = hh1 + ":" + mm1 + "-" + hh2 + ":" + mm2;
	            return time; //时间段
	        },
	        change(e) {
	          
	          const val = e.detail.value;
	          const date=this.date_list[val[0]].split(" ")[0]
	          let time = this.getTime(new Date())
	          console.log('变化了',date);
	          
	          if(date==time){
	            // 获取当前时间
	            var currentDate = new Date();
	            // 获取当前小时数
	            var currentHour = currentDate.getHours();
	            if(currentHour < this.startTime){
	                currentHour =this.startTime
	            }
	  
	            let time_list = this.getTimeList(currentHour, this.endTime, this.step);
	            this.time_list= time_list    
	            
	           
	          }else{
	            let time_list = this.getTimeList(this.startTime, this.endTime, this.step);
	            this.time_list= time_list  
	  
	          }  
	  
	            //val[0]表示选择的第一列序号，val[1]表示选择的第二列序号
	            let select = this.date_list[val[0]] + this.time_list[val[1]]
	            console.log(select);
	            this. selectDate= select
	  
	        },
	  
	        getTime(date) {
	            let y = date.getFullYear() //年
	            let m = date.getMonth() + 1  //月，月是从0开始的所以+1
	            let d = date.getDate() //日
	            m = m < 10 ? "0" + m : m //小于10补0
	            d = d < 10 ? "0" + d : d //小于10补0
	            return y + "-" + m + "-" + d; //返回时间形式yyyy-mm-dd
	        },
	        showDialog(start_time,end_time) {
	          console.log('start_time--ok--',start_time);
	          console.log('end_time--ok--',end_time);
	          this.startTime=start_time
	          this.endTime=end_time
	          this.timeSelect()
	          this.isShow= true
	           
	  
	            
	            //先向下移动dialog高度，然后恢复原位从而形成从下向上弹出效果
	            this.animation.translateY(this.dialogh).translateY(0).step()
	            this.animation=this.animation.export()
	        },
	        dimsss() {
	            //从原位向下移动dailog高度，形成从上向下的收起效果
	            this.animation.translateY(this.dialogh).step()
	            this.animation=this.animation.export()
	            //动画结束后蒙层消失
	            setTimeout(() => {
	                this.isShow=false
	            }, 300)
	        },
	        cancel() {
	            this.triggerEvent("cancel")
	            this.dimsss()
	        },
	        confirm() {
				// console.log('s',this.selectDate)
	            this.$emit("confirmPicker", {
	                selectDate: this.selectDate
	            })
	            // this.dimsss()
	        }
	    } 
};
</script>
 
<style scoped lang="less">
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  // background: #eaeaec;
  min-height: 100rpx;
}
 
.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.regional-selection {
    text-align: center;
  height: 500rpx;
  background: #fff;
      border-radius: 6rpx;
}
.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9996;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
 
.tui-mask-show {
  opacity: 1;
  visibility: visible;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  flex-direction: column;
  justify-content: flex-end;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #EDEDED;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
}

.top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #d3cfcf;
}

.top-text {
  font-size: 30rpx;
  width: 150rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.top-left-color {
  color: #878787;
}

.top-left-color-hover {
  color: #f1eaea;
}

.top-right-color {
  color: #1296DB;
}

.top-right-color-hover {
  color: #82ccf3;
}

.item {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  font-size: 18px;
}
</style>